import { SVG } from "@libs/svg.js-3.2.0/build/svg.esm.js";
import svgRawContent from "./crane.svg?raw";
import { now, FrameLoopMachine } from '@src/utils/FrameLoopMachine.js'
import { initializeCraneSVGPack } from "./cranesvg.ts";
import { setElementPosition, setElementVisiblity, exportSVG } from "./svgutils.js"

window.addEventListener("load", async () => {

    const domElement = document.querySelector("#drawing");
    const craneSVGPack = await initializeCraneSVGPack(domElement, svgRawContent);
    const {
        draw,
        setMtPositionX, setPtPositionX, setMtPositionY, setPtPositionY,
        setMtContainerVisiablity, setPtContainerVisiablity,
        setWsContainerVisiablity, setLsContainerVisiablity,
        resetStatus
    } = craneSVGPack;
    draw.viewbox(0, 0, 1400, 600);

    // 创建文本元素用于显示鼠标位置
    const text = draw.text('');
    text.move(0, 20);
    text.scale(1);
    draw.on('mousemove', (event) => { // 监听SVG容器的mousemove事件
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        text.clear().plain('Mouse Position: ' + mouseX + ', ' + mouseY);
    });

    resetStatus();
    setMtPositionX(0); // 35.5
    setPtPositionX(0); // 35.5

    setTimeout(() => {
        let x1 = 120;
        let y1 = 49;
        let x2 = 5;
        let y2 = 5;
        const flm = FrameLoopMachine((elapsedTime, deltaTime) => {
            x1 -= 0.2;
            if (x1 <= 0) { x1 = 0; }
            setMtPositionX(x1);
            y1 -= 0.05;
            if (y1 <= 5) { y1 = 5; }
            setMtPositionY(y1);
            x2 += 0.2;
            if (x2 >= 50) { x2 = 50; }
            setPtPositionX(x2);
            y2 += 0.05;
            if (y2 >= 16) { y2 = 16; }
            setPtPositionY(y2);
        });
        flm.startLoop();
    }, 1000);

})